<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>ICON-MUI</title>
	<link href="../theme/doc.css" rel="stylesheet" type="text/css" />
	<link href="../theme/mui.css" rel="stylesheet" type="text/css" />
	<script src="../theme/jquery.js" type="text/javascript"></script>
	<script src="../theme/mui.js" type="text/javascript"></script>
	<script src="../theme/doc.js" type="text/javascript"></script>
</head>
<body>
<div class="doc">
	<h1>ICON</h1>
	<p>
		图标ICON由CSS装类<code>:before</code>和字体<code>@font-face</code>公同配合创建；
		你可以进入网站(<a data-role="page" href="https://icomoon.io/app/#/select/font" target="_blank" class="mui-icon mui-icon-link mui-mini">icomoon.io</a>)选择适合图标快速生成图标字体。
		字体更新之后，您还需要编辑CSS文件中的字体配置和图标命名；如下代码
	</p>
	<div class="code">
		<span class="cmt">&lt;!--字体--&gt;</span>
		<pre>
		<span class="elem">@font-face</span> {
			<span class="attr">font-family</span>:<span class="value">'icomoon'</span>;
			<span class="attr">font-style</span>:<span class="value">normal</span>;
			<span class="attr">font-weight</span>:<span class="value">normal</span>;
			<span class="attr">src</span>:<span class="elem">url</span>('<span class="value">fonts/icomoon.eot</span>');
			<span class="attr">src</span>:<span class="elem">url</span>('<span class="value">fonts/icomoon.eot</span>') <span class="elem">format</span>('<span class="value">embedded-opentype</span>'),
			<span class="elem">url</span>('<span class="value">fonts/icomoon.woff</span>') <span class="elem">format</span>('<span class="value">woff</span>'),
			<span class="elem">url</span>('<span class="value">fonts/icomoon.ttf</span>') <span class="elem">format</span>('<span class="value">truetype</span>'),
			<span class="elem">url</span>('<span class="value">fonts/icomoon.svg</span>') <span class="elem">format</span>('<span class="value">svg</span>');
		}</pre>
		<span class="cmt">&lt;!--格式--&gt;</span>
		<pre>
		<span class="elem">.mui-icon</span><span class="value">:before</span> {
			<span class="attr">width</span>:<span class="value">22px</span>;
			<span class="attr">height</span>:<span class="value">22px</span>;
			<span class="attr">line-height</span>:<span class="value">22px</span>;
			<span class="attr">text-align</span>:<span class="value">center</span>;
			<span class="attr">font-family</span>:<span class="value">'icomoon'</span>;
			<span class="attr">font-size</span>:<span class="value">16px</span>;
			<span class="attr">display</span>:<span class="value">inline-block</span>;
			<span class="attr">content</span>:<span class="value">''</span>;
		}</pre>
		<span class="cmt">&lt;!--命名--&gt;</span>
		<pre>
		<span class="elem">.mui-icon-home</span><span class="value">:before</span> {<span class="attr">content</span>:'\e600';}
		<span class="elem">.mui-icon-link</span><span class="value">:before</span>,
		<span class="elem">.mui-icon-edit</span><span class="value">:before</span> {<span class="attr">content</span>:'\e601';}
		<span class="elem">.mui-icon-image</span><span class="value">:before</span> {<span class="attr">content</span>:'\e602';}
		<span class="elem">.mui-icon-camera</span><span class="value">:before</span> {<span class="attr">content</span>:'\e603';}
		<span class="elem">.mui-icon-music</span><span class="value">:before</span>,
		<span class="elem">.mui-icon-sound</span><span class="value">:before</span> {<span class="attr">content</span>:'\e604';}
		<span class="elem">.mui-icon-video</span><span class="value">:before</span> {<span class="attr">content</span>:'\e605';}
		<span class="elem">.mui-icon-announce</span><span class="value">:before</span> {<span class="attr">content</span>:'\e606';}
		<span class="elem">.mui-icon-file</span><span class="value">:before</span> {<span class="attr">content</span>:'\e607';}
		<span class="elem">.mui-icon-folder</span><span class="value">:before</span> {<span class="attr">content</span>:'\e608';}
		<span class="elem">.mui-icon-tag</span><span class="value">:before</span> {<span class="attr">content</span>:'\e609';}
		<span class="elem">.mui-icon-qrcode</span><span class="value">:before</span> {<span class="attr">content</span>:'\e60a';}
		<span class="elem">.mui-icon-cart</span><span class="value">:before</span> {<span class="attr">content</span>:'\e60b';}
		<span class="elem">.mui-icon-phone</span><span class="value">:before</span> {<span class="attr">content</span>:'\e60c';}
		<span class="elem">.mui-icon-email</span><span class="value">:before</span> {<span class="attr">content</span>:'\e60d';}
		<span class="elem">.mui-icon-location</span><span class="value">:before</span> {<span class="attr">content</span>:'\e60e';}
		<span class="elem">.mui-icon-clock</span><span class="value">:before</span> {<span class="attr">content</span>:'\e60f';}
		<span class="elem">.mui-icon-link</span><span class="value">:before</span> {<span class="attr">content</span>:'\e620';}
		<span class="elem">.mui-icon-star</span><span class="value">:before</span> {<span class="attr">content</span>:'\e631';}
		<span class="elem">.mui-icon-check</span><span class="value">:before</span> {<span class="attr">content</span>:'\e62a';}
		<span class="elem">.mui-icon-minus</span><span class="value">:before</span> {<span class="attr">content</span>:'\e62b';}
		<span class="elem">.mui-icon-plus</span><span class="value">:before</span> {<span class="attr">content</span>:'\e62c';}
		<span class="elem">.mui-icon-quote</span><span class="value">:before</span> {<span class="attr">content</span>:'\e635';}
		<span class="elem">.mui-icon-quote-end</span><span class="value">:before</span> {<span class="attr">content</span>:'\e636';}
		</pre>
	</div>

	<h2>方法</h2>
	<p>令某个元素具有图标控件</p>
	<div class="code">
		<div class="pre">
			<span class="elem">&lt;a</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home"</span><span class="elem">&gt;</span>
			链接
			<span class="elem">&lt;/a&gt;</span>
			<br />
			<span class="elem">&lt;button</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home"</span><span class="elem">&gt;</span>
			按钮
			<span class="elem">&lt;/button&gt;</span>
		</div>
		<div class="demo">
			<a data-role="sidepanel" data-sidepanel-right href="javascript:void(0)" class="mui-icon mui-icon-home">链接</a>
			<button class="mui-icon mui-icon-home">按钮</button>
		</div>
	</div>

	<h2>位置</h2>
	<p>设置图标相对于当前元素的位置，支持上<code>.mui-icon-t</code>、下<code>.mui-icon-b</code>、左<code>.mui-icon-l</code>、右<code>.mui-icon-r</code>、无文字<code>.mui-icon-n</code></p>
	<div class="code">
		<div class="pre">
			<span class="elem">&lt;button</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home mui-icon-t"</span><span class="elem">&gt;</span>上方/TOP<span class="elem">&lt;/button&gt;</span><br />
			<span class="elem">&lt;button</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home mui-icon-l"</span><span class="elem">&gt;</span>左边/LEFT<span class="elem">&lt;/button&gt;</span><br />
			<span class="elem">&lt;button</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home mui-icon-r"</span><span class="elem">&gt;</span>右侧/RIGHT<span class="elem">&lt;/button&gt;</span><br />
			<span class="elem">&lt;button</span> <span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home mui-icon-b"</span><span class="elem">&gt;</span>下面/BOTTOM<span class="elem">&lt;/button&gt;</span><br />
			<span class="elem">&lt;button</span>
			<span class="attr">class</span>=<span class="value">"mui-icon mui-icon-home mui-icon-n"</span><span class="elem">&gt;</span>无文字/仅图标<span class="elem">&lt;/button&gt;</span>
		</div>
		<div class="demo">
			<a class="mui-icon mui-icon-home mui-icon-t">上方/TOP</a>
			<a data-theme="b" class="mui-icon mui-icon-home mui-icon-l">左边/LEFT</a>
			<a data-theme="a" class="mui-icon mui-icon-home mui-icon-r">右侧/RIGHT</a>
			<a data-theme="b" class="mui-icon mui-icon-home mui-icon-b">下面/BOTTOM</a>
			<a data-theme="a" class="mui-icon mui-icon-home mui-icon-n">无文字/仅图标</a>
		</div>
	</div>

</div>
</body>
</html>